Hong ji Project
홈페이지의 목적
• 포토폴리오 사이트로
고객의 요구사항을 최대한 반영하고
이 사이트의 기본기능인
웹사이트 방문자에게 작품을 보여주고
사용자에게 쉬운 사용법을 제공.
사용한 api및 언어
• html5
• Javascript
• Jquery
• Bootstrapk
• php
고객의 요구사항
고객의 요구사항
기능
1)페이지 기능을 스크롤로
구현
2)페이지 로딩을 최소화
디자인
1)화면 크기에 따른 홈페이지의
디자인들이 비슷해야함.
기능 구현
메인 페이지 구현
메인 페이지
일정 간격만큼 스크롤시
다음페이지를 불러오는 기능
• 게시물 클릭하여 게시물을 보는
페이지로 이동하는 기능
• 게시물의 db 구조는 게시물 id,
본문 , 제목 , 이미지들의 링 크(또는
비디오의 링크)들로 구성되여
php에서 로딩하는 작 업을
수행하고 있습니다.
페이지로딩을 최소화
관련 소스 링크
https://github.com/ho ngjinho/hongji_projec t/blob/m
aster/source/js/paging_default_op.js
Window.onhashchange
$(window).ready
이벤트와 now_paging()함수 참조
구현 방법
아까 페이징은 스크롤
이벤트를 들어서 ajax로 구현하였고
카테고리 구현은
해시 데이터(경로#id)를 써서 뒤로
가기, 새로 고침, 홈페이지 최초 방문
시 카테고리를 인식하여 ajax로
데이터를 불러와서 결과물을
출력한다
해시 데이터를 페이지 태그처럼
사용하였습니다.
디자인 구현
1) Pc의 디자인은 css 미디
어 쿼리와 calc() 함수로
디자인을 구현
2) 모바일 페이지는 부트스
트랩으로 구현
디자인
관리자 모드
관리자 모드 구현
기능 설명.
로그인하면 관리자 ui가
나옵니다.
업로드 및 게시물 수정을
할수있습니다.
업로드와 게시물 수정은
게시물의 고유 id를 이용하여
업로 드 및 수정 작업이 진행
됩니다.
관리자 모드 사진
관리자 모드 게시물 수정 및 업로드 창 사진
